<template>
  <div class="retrieve">
    <form action="JavaScript:;" v-if="isFlag">
      <input type="text" placeholder="请输入用户名" v-model="retrieveInfo.username" maxlength="18">
      <input type="email" placeholder="请输入邮箱" v-model="retrieveInfo.email">
      <input type="text" placeholder="请输入验证码" v-model="retrieveInfo.code" class="verification">
      <button type="button" class="code" @click="sendCode" :disabled="sendCodeBtn.disabled">{{sendCodeBtn.text}}</button>
      <button class="btn" @click="retrieve">找回</button>
    </form>
    <form action="JavaScript:;" v-else>
      <input type="password" v-model="commitInfo.password" placeholder="请输入新密码" maxlength="18">
      <input type="password" v-model="commitInfo.newPassword" placeholder="请再次确认新密码" maxlength="18">
      <button class="btn" @click="commit">确认</button>
    </form>
  </div>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
export default {
  name: 'Retrieve',

  data() {
    return {
      sendCodeBtn: { // 发送验证码按钮
        disabled: false, // 是否禁用
        text: '发送验证码' // 按钮文本
      },
      isFlag: true, // 是否重置密码
      retrieveInfo: { // 找回信息
        username: '', // 用户名
        email: '', // 邮箱
        code: '' // 验证码
      },
      commitInfo: { // 重置密码信息
        password: '',  // 新密码
        newPassword: '', // 确认新密码
        username: '' // 用户名
      }
    };
  },

  watch: {
    'retrieveInfo.username': {
      handler(val){
        this.commitInfo.username = val
      }
    }
  },

  methods: {
    // 发送验证码
    sendCode(){
      this.sendCodeBtn.disabled = true
      this.sendCodeBtn.text = 60
      let {email} = this.retrieveInfo
      let timer = setInterval(() => {
        this.sendCodeBtn.text--
        if(this.sendCodeBtn.text == 0){
          this.sendCodeBtn.disabled = false
          this.sendCodeBtn.text = '发送验证码'
          clearInterval(timer)
        }
      }, 1000)
      if(email.trim()){
        this.$api.getEmailCode({
          email,
          type: 'retrieve'
        }).then(res => {
          if(res == 1){
            this.showHint({title:'已发送',isFlag:true})
          }else{
            this.showHint({title:res,isFlag:true})
          }
        })
        this.hideLoading()
      }else{
        this.showHint({title:'邮箱不能为空!',isFlag:false})
        this.sendCodeBtn.text = 1
      }
    },
    // 找回密码
    retrieve(){
      let {username,email,code} = this.retrieveInfo
      if(username && email && code){
        this.$api.retrievePassword(this.retrieveInfo).then(res => {
          if(res == 1){
            this.showHint({title:'请设置新密码!',isFlag:true})
            this.isFlag = false
          }else{
            this.showHint({title:res,isFlag:false})
          }
        })
      }else{
        this.showHint({title:'请完善信息!',isFlag:false})
      }
    },
    // 重置密码
    commit(){
      let {password,newPassword} = this.commitInfo
      if(password.trim() && newPassword.trim()){
        if(password !== newPassword){
          this.showHint({title:'俩次密码不同!',isFlag:false})
        }else if(password.length < 6 || password.length > 18){
          this.showHint({title:'密码长度为6-18位!',isFlag:false})
        }else{
          this.$api.resetPassword(this.commitInfo).then(res => {
            if(res == 1){
              this.showHint({title:'密码已重置!',isFlag:true})
              this.$parent.isPage = 0
            }else{
              this.showHint({title:res,isFlag:false})
            }
          })
        }
      }else{
        this.showHint({title:'不能输入空密码!',isFlag:false})
      }
    },
    ...mapActions(['showHint']),
    ...mapMutations(['hideLoading'])
  },
};
</script>

<style scoped>

</style>